import React, { useState } from 'react';
import {
  Form,
  Row,
  Col,
  Input,
  Button,
  Select,
  Cascader,
  DatePicker,
} from 'antd';
import {
  DownOutlined,
  UpOutlined,
  ClearOutlined,
  SearchOutlined,
} from '@ant-design/icons';
import '../SecondPages/SecondPages.css';
const { RangePicker } = DatePicker;
const { Option } = Select;
const AdvancedSearchForm = (props) => {
  const [expand, setExpand] = useState(false);
  const [form] = Form.useForm();
  const getFields = () => {
    const getFormItem = (item) => {
      let reItem;
      if (item.type === 'input') {
        reItem = (
          <Input
            style={{ width: 150 }}
            placeholder={item.placeholder ? item.placeholder : '请输入'}
            maxLength={item.maxLength}
            allowClear
          />
        );
      } else if (item.type === 'select') {
        reItem = (
          <Select
            style={{ width: 120 }}
            placeholder='请选择'
            allowClear
            showSearch
            defaultValue={item.value}
            filterOption={(input, option) =>
              option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
            }
          >
            {item.options.map((item) => (
              <Option key={item.code} value={item.code}>
                {item.label}
              </Option>
            ))}
          </Select>
        );
      } else if (item.type === 'selectMultiple') {
        reItem = (
          <Select
            style={{ width: 150 }}
            placeholder='请选择'
            allowClear
            showSearch
            mode='multiple'
            optionFilterProp='label'
            filterOption={(input, option) =>
              option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
            }
          >
            {item.options.map((item) => (
              <Option key={item.code} value={item.code}>
                {item.label}
              </Option>
            ))}
          </Select>
        );
      } else if (item.type === 'cascader') {
        reItem = (
          <Cascader
            style={{ width: 180 }}
            allowClear
            options={item.options}
            placeholder='请选择'
            changeOnSelect
            showSearch={{
              matchInputWidth: false,
              filter(inputValue, path) {
                return path.some(
                  (option) =>
                    option.label
                      .toLowerCase()
                      .indexOf(inputValue.toLowerCase()) > -1
                );
              },
            }}
          />
        );
      } else if (item.type === 'rangePicker') {
        reItem = <RangePicker style={{ width: 180 }} allowClear />;
      }
      return reItem;
    };
    const len = props.formData.length;
    const count = expand ? len : 4 > len ? len : 4;
    const children = [];
    for (let i = 0; i < count; i++) {
      if (props.type && props.type == 'oneItem') {
        children.push(
          <Col
            // flex='240px'
            key={i}
          >
            <Form.Item
              key={props.formData[i].code}
              name={props.formData[i].code}
              label={props.formData[i].name}
            >
              {getFormItem(props.formData[i])}
            </Form.Item>
          </Col>
        );
      } else if (props.formData[i].type === 'rangePicker') {
        children.push(
          <Col
            // flex='360px'
            key={i}
          >
            <Form.Item
              key={props.formData[i].code}
              name={props.formData[i].code}
              label={props.formData[i].name}
            >
              {getFormItem(props.formData[i])}
            </Form.Item>
          </Col>
        );
      } else if (props.formData[i].type === 'select') {
        children.push(
          <Col
            // flex='180px'
            key={i}
          >
            <Form.Item
              key={props.formData[i].code}
              name={props.formData[i].code}
              label={props.formData[i].name}
            >
              {getFormItem(props.formData[i])}
            </Form.Item>
          </Col>
        );
      } else if (props.formData[i].type === 'cascader') {
        children.push(
          <Col
            // flex='330px'
            key={i}
          >
            <Form.Item
              key={props.formData[i].code}
              name={props.formData[i].code}
              label={props.formData[i].name}
            >
              {getFormItem(props.formData[i])}
            </Form.Item>
          </Col>
        );
      } else {
        children.push(
          <Col
            // flex='240px'
            key={i}
          >
            <Form.Item
              key={props.formData[i].code}
              name={props.formData[i].code}
              label={props.formData[i].name}
            >
              {getFormItem(props.formData[i])}
            </Form.Item>
          </Col>
        );
      }
    }
    return children;
  };
  let onFinish = (values) => {
    let { ...value } = values;
    if (value.str) {
      value.str = value.str.trim();
      if (value.str.length == 0) delete value.str;
    }
    if (value.empNoOrName) value.empNoOrName = value.empNoOrName.trim();
    if (value.title) value.title = value.title.trim();
    if (value.name) value.name = value.name.trim();

    props.execSearch(value);
  };
  const clearAll = () => {
    let data = {};
    for (const key in props.formData) {
      data[props.formData[key].code] = null;
    }
    form.setFieldsValue(data);
  };
  return (
    <Form
      form={form}
      name='advanced_search'
      className='ant-advanced-search-form'
      onFinish={onFinish}
      initialValues={props.initialValues ? props.initialValues : null}
      // labelCol={{style:{width:80}}}
    >
      <Row gutter={12}>
        {getFields()}
        <Col>
          <Button
            type='primary'
            style={{ margin: '0 8px 0 8px' }}
            htmlType='submit'
            icon={<SearchOutlined />}
          >
            搜索
          </Button>
          <Button
            // type='link'
            onClick={() => {
              // form.resetFields();
              clearAll();
            }}
            icon={<ClearOutlined />}
          >
            清除
          </Button>
          <a
            style={{
              margin: '0 0 0 8px',
              fontSize: 12,
              display: props.formData.length > 4 ? 'inline-block' : 'none',
            }}
            onClick={() => {
              setExpand(!expand);
            }}
          >
            {expand ? <UpOutlined /> : <DownOutlined />}
          </a>
        </Col>
      </Row>
    </Form>
  );
};

export default AdvancedSearchForm;
